<template>
  <div id="card" class="card flex" style="height:68vh">
    <el-row>
      <el-tabs v-model="page.activeName" @tab-click="handleClick">
        <el-tab-pane
          v-for="item in data.tabs"
          :key="item.name"
          :ref="item.name"
          :label="item.label"
          :name="item.name"
        >
        </el-tab-pane>
      </el-tabs>
    </el-row>
    <el-row class="main">
      <transition name="breadcrumb">
        <component
          :is="page.activeName"
          ref="cardCom"
          :formdata="cardData"
          :readonly="true"
          keep-alive
        ></component>
      </transition>
    </el-row>
  </div>
</template>

<script>
import Vue from "vue";
import LazyLoading from "@/utils/LazyLoading";
import { System4 } from "@/api";
// import sysAssetA3 from "@/view/asset/AssetA1/sysAssetA3";
export default {
  data() {
    return {
      //页面控制
      page: {
        activeName: "Edit"
      },
      //数据
      data: {
        tabs: []
      }
    };
  },
  //外部属性
  props: {
    cardData: Object
  },
  //内部方法
  methods: {
    async initPage() {
      const listmssys4 = await System4.GetSys4ByTypeCode("008");
      listmssys4.forEach(element => {
        this.data.tabs.push({
          label: element.System_4_40,
          name: element.System_4_50
        });
      });
      // this.data.tabs.push({ label: "资产信息", name: "Edit" });
      // this.data.tabs.push({ label: "页签2", name: "SysAssetA3" });
    },
    handleClick() {}
  },
  //组件
  components: {
    // eslint-disable-next-line vue/no-unused-components
    Edit: resolve => {
      require(["./assetA1Edit"], resolve);
    },
    SysAssetA3: resolve => {
      require(["@/view/asset/sysAssetA3"], resolve);
    }
  },
  //初始化 异步加async await
  mounted() {
    this.initPage();
  },
  //计算属性
  computed: {},
  //监视
  watch: {}
};
</script>

<style lang="scss" scoped>
@import "@/style/base.scss";
.card {
  padding-left: 20px;
  padding-right: 20px;
}
</style>
